jQuery এর মাধ্যমে DOM ট্রাভার্সাল খুবই সহজ। parent(), children(), এবং siblings() ফাংশনগুলি DOM এর বিভিন্ন অংশে নেভিগেট করতে সাহায্য করে। এই ফাংশনগুলি নিচে বিস্তারিত আলোচনা করা হলো।
parent()
parent() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের প্যারেন্ট এলিমেন্ট নির্বাচন করে। এটি সাধারণত একটি নির্দিষ্ট এলিমেন্টের সরাসরি উপরের লেভেলের এলিমেন্ট নির্বাচন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
<div class="parent">
<p class="child">আমি একটি প্যারাগ্রাফ।</p>
</div>
$(".child").parent().css("border", "2px solid red");
উপরের কোডটি প্যারাগ্রাফের প্যারেন্ট ডিভকে লাল বর্ডার দেবে।
children()
children() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের সরাসরি চাইল্ড এলিমেন্টগুলি নির্বাচন করে। এটি কোনো এলিমেন্টের অধীনে অবস্থিত সব চাইল্ডগুলির মধ্যে থেকে নির্বাচন করে।
উদাহরণ:
<div class="parent">
<p class="child">প্রথম প্যারাগ্রাফ।</p>
<p class="child">দ্বিতীয় প্যারাগ্রাফ।</p>
</div>
$(".parent").children().css("color", "blue");
উপরের কোডটি সব চাইল্ড প্যারাগ্রাফের টেক্সট রঙ নীল করবে।
siblings()
siblings() ফাংশনটি কোনো নির্দিষ্ট এলিমেন্টের সকল সিবলিংসকে নির্বাচন করে। এটি একই প্যারেন্টের অধীনে অন্যান্য চাইল্ডগুলি নির্বাচন করে।
উদাহরণ:
<div>
<button>বোতাম ১</button>
<button>বোতাম ২</button>
<button>বোতাম ৩</button>
</div>
$("button").click(function() {
$(this).siblings().css("color", "green");
});
উপরের কোডটি কোনো বোতাম ক্লিক করলে, অন্যান্য সিবলিং বোতামগুলির টেক্সট রঙ সবুজ করে দেবে।
সারাংশ
jQuery-র parent(), children(), এবং siblings() ফাংশনগুলি DOM ট্রাভার্সালের জন্য খুবই কার্যকর। এগুলি ব্যবহার করে কোড অনেক সংক্ষিপ্ত এবং ম্যানেজমেন্ট সহজ হয়, যা ওয়েব ডেভেলপমেন্টের জন্য অত্যন্ত প্রয়োজনীয়।
Read more
